<template>
    <div class="relative">
        <p @click="click" v-if="!showImg" :style="{height: size, width: size, border:border, 'line-height': size,'font-size': fontSize,
        'background': background, 'border-radius':borderRadius}"
           class="text-head text-center" v-text="nameIcon"></p>
        <img @click.stop="click" class="logo" v-if="showImg" :style="{height: size, width: size,border:border,'border-radius':borderRadius}" :src="img">
        <slot></slot>
    </div>
</template>

<script>
  export default {
    name: "HeadIcon",
    props: {
      background: {
        type: String,
        default: function () {
          return 'linear-gradient(180deg, #1E87F0 0%, #4690F5 100%)'
        }
      },
      click: {
        type: Function,
        default: function () {

        }
      },
      status: {
        type: Boolean,
        default: function () {

          return false
        }
      },
      size: {
        type: String,
        default: function () {
          return '40px'
        }
      },
      fontSize: {
        type: String,
        default: function () {
          return '14px'
        }
      },
      name: {
        type: String,
        default: function () {
          return ''
        }
      },
      img: {
        type: String,
        default: function () {
          return ''
        }
      },
      border: {
        type: String,
        default: function () {
          return 'white solid 2px'
        }
      },
      borderRadius:{
        type: String,
        default: function () {
          return '50%'
        }
      }
    }, data() {
      return {
        showImg: false,
        nameIcon: ''
      }
    }, mounted() {
      this.dataChange()
      this.nameSlice()
    }, watch: {
      img: function () {
        this.dataChange()
      }
    },

    methods: {
      dataChange: function () {
        if (this.img.length === 0) {
          this.showImg = false
        } else {
          this.showImg = true
        }
      },
      nameSlice: function () {
        if (this.status) {
          this.nameIcon = this.name.slice(0, 2)
        } else {
          if (this.name.length > 2) {
            this.nameIcon = this.name.slice(this.name.length - 2, this.name.length)
          } else {
            this.nameIcon = this.name
          }
        }
      }
    }
  }
</script>

<style scoped>
    .logo {
        border-radius: 50%;
    }

    .text-head {
        color: white;
        border-radius: 50%;
    }

    .img-head {
        border-radius: 50%;
    }


</style>
